<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function effect() {
            // 这里修改了document.body.innerHTML的值 影响了下面的getBody函数读取 那么effect就是副作用函数
            document.body.innerHTML = 'Hello vue3'
        }
        function getBody() {
            console.log(document.body.innerHTML);
        }


        const obj = {
            text: 'Hello world'
        }
        function effect2() {
            doument.body.innerHTML = obj.text
        }
        // 如果obj.text的值发生了改变 我们希望document.body.innerHTML也能够发生改变，那么obj就是一个响应式的数据
    </script>
</body>

</html>